<template>
  <!-- banner轮播图 -->
  <my-swiper></my-swiper>
  <!-- banner下方图片 -->
  <div class="bg">
    <li v-for="(item,index) in tgList" :key="index">
      <img :src="item.pic" alt="tg_pic">
    </li>
  </div>
  <!-- 三个分类 -->
  <div :class="{categories:true,cate2:isFixed}" >
    <li>
      <router-link to="/homerecommend">
      首页推荐
      </router-link>
    </li>
    <li>
      <router-link to="/myattention">
      我的关注
      </router-link>
    </li>
    <li>
      <router-link to="/allrecommend">
      全部推荐
      </router-link>
    </li>
    <span>
      <img src="../assets/img/tab.png" alt="">
    </span>
  </div>
  <!-- 视图区域 -->
  <router-view></router-view>
  <!-- 回到顶部 -->
  <div :class="{backTop:true,backTop2:isBottom}" v-show="isTop" >
    <a href="javascript:void(0)" @click="goTop"></a>
  </div>
  <!-- footer -->
  <my-footer></my-footer>
</template>
<style lang="scss" scoped>
// 回到顶部
.backTop{
  z-index: 9999;
  position: fixed;
  right: 10%;
  bottom: 50px;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  background-color: #bebebe;
  overflow: hidden;
  a{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/top2.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
  }
}
.backTop:hover >a{
  background-image: url("../assets/img/top1.png");
}
.backTop2{
  bottom:380px;
}
// banner下方图片样式
.bg{
  width: 74%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  height: 208px;
  li{
    width: 260px;
    height: 208px;
    img{
      width: 100%;
      border-radius: 5px;
    }
  }
}
// 三个分类标题样式
.categories{
  width: 100%;
  height: 56px;
  position: relative;
  background-color: white;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  li{
    width: 128px;
    height: 56px;
    margin-bottom: 2px;
    a{
      display: block;
      width: 64px;
      height: 56px;
      margin: auto;
      line-height: 56px;
      font-size: 16px;
      color: #999999;
      &.router-link-exact-active {
      color: black;
      border-bottom: 2px solid black;
      }
    }
  }
  li:hover >a{
    color: black;
    border-bottom: 2px solid black;
  }
  span{
    width: 210px;
    height: 55px;
    position: absolute;
    right: 13%;
    img{
      width: 100%;
    }
  }
}
.cate2{
  position:fixed;
  top: 0px;
  z-index: 9999;
  margin-top: 0px;
}
</style>
<script>
// 引入swiper组件
import MySwiper from '@/components/MySwiper.vue'
import {reactive,ref} from 'vue'
import MyFooter from '@/components/MyFooter.vue'
export default {
  name:'HomeView',
  components:{
    MySwiper,
    MyFooter
  },
  setup(){
    // banner下方图片数据
    let tgList = reactive([
      {pic:require('../assets/img/tag1.jpg')},
      {pic:require('../assets/img/tag2.jpg')},
      {pic:require('../assets/img/tag3.jpg')},
      {pic:require('../assets/img/tag4.jpg')},
      {pic:require('../assets/img/tag5.jpg')},
    ])
    // 判断三个分类是否固定
    let isFixed = ref(false)
    // 回到顶部
    let isTop = ref(false)
    let isBottom = ref(false)
    window.onscroll = ()=>{
      if(document.documentElement.scrollTop + document.body.scrollTop > 700){
        isFixed.value = true
        if(document.documentElement.scrollTop + document.body.scrollTop > 1000){
          isTop.value = true
          if(document.documentElement.scrollTop + document.body.scrollTop > 3700){
            isBottom.value = true
          }
          else{
            isBottom.value = false
          }
        }
        else{
          isTop.value = false
        }
      }
      else{
        isFixed.value = false
      }
    }
    
    let goTop = ()=>{
      document.body.scrollIntoView({ block:'start',behavior:'smooth'})
    }
    return{
      tgList,
      isFixed,
      isTop,
      isBottom,
      goTop
    }
  }
}
</script>
